<template>
  <div class="app-container customer-div">
    <el-tabs v-model="activeName">
      <el-tab-pane label="资金成本" name="first">
        <el-form :inline="true" :model="listQuery2" size="mini" label-width="100px" style="margin-top: 40px">
          <el-form-item label="合同号：">
            <el-input v-model="listQuery2.orderSn" clearable></el-input>
          </el-form-item>
          <el-form-item label="客户名称：">
            <el-autocomplete
              clearable
              class="inline-input"
              value-key="customerName"
              :fetch-suggestions="querySearch"
              v-model="listQuery2.keywords"
              placeholder="请输入内容"
              @clear="clearKeywords"
              @select="handleSelectCustomerName"
              :trigger-on-focus="false"
            ></el-autocomplete>
          </el-form-item>
          <el-form-item label="业务员：">
            <el-select v-model="listQuery2.userId" filterable placeholder="请选择" clearable>
              <el-option
                v-for="item in userOptionList"
                :key="item.userId"
                :label="item.userName"
                :value="item.userId">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button
              @click="handleSearchList2()"
              type="primary">
              查询
            </el-button>
            <el-button
              :loading="btnLoading"
              @click="downloadExcel()"
              type="primary">
              导出
            </el-button>
          </el-form-item>
        </el-form>

        <div class="table-container">
          <el-table
            v-loading="listLoading2"
            :data="tableData2"
            border
            style="width: 100%; margin-top: 20px">
            <el-table-column  label="合同号" width="140" align="center" prop="orderSn">
              <template slot-scope="scope">
                <el-link @click="toOrderDetail(scope.row.orderId)" type="primary" style="font-size:12px">
                  {{scope.row.orderSn}}
                </el-link>
              </template>
            </el-table-column>
            <el-table-column  label="财务状态" width="100" align="center" prop="orderSn">
              <template slot-scope="scope">
                {{scope.row.financeState}}
              </template>
            </el-table-column>
            <el-table-column  label="支付状态" width="100" align="center" prop="orderSn">
              <template slot-scope="scope">
                {{scope.row.payState}}
              </template>
            </el-table-column>
            <el-table-column
              label="客户名称"
              width="300">
              <template slot-scope="scope">
                {{scope.row.customerName}}
              </template>
            </el-table-column>
            <el-table-column
              label="采购评级"
              width="100"
              align="center">
              <template slot-scope="scope">
                {{scope.row.customerLabel}}
              </template>
            </el-table-column>
            <el-table-column
              prop="goodsNum"
              align="center"
              label="合同数量"
              width="100">
            </el-table-column>
            <el-table-column
              align="center"
              width="120"
              label="合同金额">
              <template slot-scope="scope">
                {{scope.row.orderAmount}}
              </template>
            </el-table-column>
            <el-table-column
              label="已付金额"
              width="120"
              align="center">
              <template slot-scope="scope">
                {{scope.row.paidAmount}}
              </template>
            </el-table-column>
            <el-table-column
              label="未付金额"
              width="120"
              align="center">
              <template slot-scope="scope">
                {{scope.row.unPaidAmount}}
              </template>
            </el-table-column>
            <el-table-column
              label="已发货数量"
              width="120"
              align="center">
              <template slot-scope="scope">
                {{scope.row.goodsSendNum}}
              </template>
            </el-table-column>
            <el-table-column
              label="未发货数量"
              width="120"
              align="center">
              <template slot-scope="scope">
                {{scope.row.goodsUnSendNum}}
              </template>
            </el-table-column>
            <el-table-column
              label="计息金额"
              width="120"
              align="center">
              <template slot-scope="scope">
                {{scope.row.computeAmount}}
              </template>
            </el-table-column>
            <el-table-column
              label="结算方式"
              width="150"
              align="center">
              <template slot-scope="scope">
                {{scope.row.orderRemark}}
              </template>
            </el-table-column>
            <el-table-column
              label="业务员"
              width="100"
              align="center">
              <template slot-scope="scope">
                {{scope.row.userName }}
              </template>
            </el-table-column>
            <el-table-column
              label="状态"
              width="100">
              <template slot-scope="scope">
                {{scope.row.orderState}}
              </template>
            </el-table-column>
            <!--          <el-table-column-->
            <!--                  align="center"-->
            <!--                  label="资金成本(利息)"-->
            <!--                  width="150">-->
            <!--            <template slot-scope="scope">-->
            <!--              <span style="color:Red">{{scope.row.interestAmount}}</span>-->
            <!--            </template>-->
            <!--          </el-table-column>-->
            <el-table-column
              align="center"
              label="销售资金成本"
              width="150">
              <template slot-scope="scope">
                {{scope.row.saleCost}}
              </template>
            </el-table-column>


            <el-table-column
              fixed="right"
              width="100"
              label="操作"
              align="center">
              <template slot-scope="scope">
                <el-button
                  type="text"
                  size="mini"
                  @click="showDialog2(scope.row)">利息记录
                </el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div class="pagination-container">
          <el-pagination
            background
            @size-change="handleSizeChange2"
            @current-change="handleCurrentChange2"
            layout="total, sizes,prev, pager, next,jumper"
            :current-page.sync="listQuery2.pageNum"
            :page-size="listQuery2.pageSize"
            :page-sizes="[10,15,20]"
            :total="count2">
          </el-pagination>
        </div>
      </el-tab-pane>
      <el-tab-pane label="利息记录" name="second">
        <el-form :inline="true" :model="listQuery3" size="mini" label-width="100px" style="margin-top: 40px">
          <el-form-item label="合同号：">
            <el-input v-model="listQuery3.orderSn" clearable></el-input>
          </el-form-item>
          <el-form-item label="发货单号：">
            <el-input v-model="listQuery3.deliverSn" clearable></el-input>
          </el-form-item>
          <el-form-item label="业务员：">
            <el-select v-model="listQuery3.userId" filterable placeholder="请选择" clearable>
              <el-option
                v-for="item in userOptionList"
                :key="item.userId"
                :label="item.userName"
                :value="item.userId">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="客户名称：">
            <el-autocomplete
              clearable
              class="inline-input"
              value-key="customerName"
              :fetch-suggestions="querySearch"
              v-model="listQuery3.keywords"
              placeholder="请输入内容"
              @clear="clearKeywords3"
              @select="handleSelectCustomerName3"
              :trigger-on-focus="false"
            ></el-autocomplete>
          </el-form-item>

          <el-form-item label="计息日期：">
            <el-date-picker
              v-model="listQuery3.computeDate"
              type="daterange"
              format="yyyy 年 MM 月 dd 日"
              value-format="yyyy-MM-dd"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期">
            </el-date-picker>
          </el-form-item>

          <el-form-item>
            <el-button
              @click="handleSearchList3()"
              type="primary">
              查询
            </el-button>
            <el-button
              :loading="btnLoading3"
              @click="downloadExcel3()"
              type="primary">
              导出
            </el-button>
          </el-form-item>
        </el-form>
        <div style="font-size:14px;line-height: 30px;padding:10px 0 ">
          利息总额：<span style="font-weight: bold">{{interestAll }}</span>
        </div>
        <div class="table-container" style="margin-top:0">
          <el-table
            v-loading="listLoading3"
            :data="tableData3"
            border
            style="width: 100%;">
            <el-table-column  label="销售合同编号" min-width="150" align="center">
              <template slot-scope="scope">
                <el-link @click="toOrderDetail(scope.row.orderId)" type="primary" style="font-size:12px">
                  {{scope.row.orderSn}}
                </el-link>
              </template>
            </el-table-column>
            <el-table-column  label="客户名称" min-width="200" align="center" >
              <template slot-scope="scope">
                {{scope.row.customerName}}
              </template>
            </el-table-column>
            <el-table-column  label="业务员" min-width="200" align="center" >
              <template slot-scope="scope">
                {{scope.row.userName}}
              </template>
            </el-table-column>
            <el-table-column  label="出库单号" min-width="150" align="center" >
              <template slot-scope="scope">
                {{scope.row.deliverSn}}
              </template>
            </el-table-column>

            <el-table-column
              label="合同金额"
              min-width="100"
              align="center">
              <template slot-scope="scope">
                {{scope.row.orderAmount}}
              </template>
            </el-table-column>
            <el-table-column
              align="center"
              label="合同收款"
              min-width="100">
              <template slot-scope="scope">
                  {{scope.row.payAmount}}
              </template>
            </el-table-column>
            <el-table-column
              align="center"
              label="合同应收"
              min-width="100">
              <template slot-scope="scope">
                {{scope.row.needAmount}}
              </template>
            </el-table-column>
            <el-table-column
              align="center"
              min-width="100"
              label="计息变动">
              <template slot-scope="scope">
                {{scope.row.changeAmount}}
              </template>
            </el-table-column>
            <el-table-column
              label="计息金额"
              min-width="100"
              align="center">
              <template slot-scope="scope">
                {{scope.row.computeAmount}}
              </template>
            </el-table-column>
            <el-table-column
              label="计息时间"
              min-width="100"
              align="center">
              <template slot-scope="scope">
                {{scope.row.computeTime}}
              </template>
            </el-table-column>

            <el-table-column
              label="利率"
              min-width="100"
              align="center">
              <template slot-scope="scope">
                {{scope.row.interestRate}}
              </template>
            </el-table-column>
            <el-table-column
              label="利息金额"
              min-width="100"
              align="center">
              <template slot-scope="scope">
                {{scope.row.interest}}
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div class="pagination-container">
          <el-pagination
            background
            @size-change="handleSizeChange3"
            @current-change="handleCurrentChange3"
            layout="total, sizes,prev, pager, next,jumper"
            :current-page.sync="listQuery3.pageNum"
            :page-size="listQuery3.pageSize"
            :page-sizes="[10,15,20]"
            :total="count3">
          </el-pagination>
        </div>
      </el-tab-pane>
    </el-tabs>

    <!--利息记录-->
    <el-dialog
      :close-on-click-modal="false"
      :beforeClose="handleClose2"
      title="利息记录"
      :visible.sync="dialogVisible2"
      width="800px">
      <div style="overflow: hidden">
        <div class="table-container">
          <el-table
            v-loading="listLoading4"
            :data="tableData4"
            border
            style="width: 100%; margin-top: 20px">
            <el-table-column  label="销售合同编号" min-width="150" align="center">
              <template slot-scope="scope">
                <el-link @click="toOrderDetail(scope.row.orderId)" type="primary" style="font-size:12px">
                  {{scope.row.orderSn}}
                </el-link>
              </template>
            </el-table-column>
            <el-table-column  label="客户名称" min-width="200" align="center" >
              <template slot-scope="scope">
                {{scope.row.customerName}}
              </template>
            </el-table-column>
            <el-table-column  label="业务员" min-width="200" align="center" >
              <template slot-scope="scope">
                {{scope.row.userName}}
              </template>
            </el-table-column>

            <el-table-column
              label="合同金额"
              min-width="100"
              align="center">
              <template slot-scope="scope">
                {{scope.row.orderAmount}}
              </template>
            </el-table-column>
            <el-table-column
              align="center"
              label="合同收款"
              min-width="100">
              <template slot-scope="scope">
                {{scope.row.payAmount}}
              </template>
            </el-table-column>
            <el-table-column
              align="center"
              label="合同应收"
              min-width="100">
              <template slot-scope="scope">
                {{scope.row.needAmount}}
              </template>
            </el-table-column>
            <el-table-column
              align="center"
              min-width="100"
              label="计息变动">
              <template slot-scope="scope">
                {{scope.row.changeAmount}}
              </template>
            </el-table-column>
            <el-table-column
              label="计息金额"
              min-width="100"
              align="center">
              <template slot-scope="scope">
                {{scope.row.computeAmount}}
              </template>
            </el-table-column>
            <el-table-column
              label="计息时间"
              min-width="100"
              align="center">
              <template slot-scope="scope">
                {{scope.row.computeTime}}
              </template>
            </el-table-column>

            <el-table-column
              label="利率"
              min-width="100"
              align="center">
              <template slot-scope="scope">
                {{scope.row.interestRate}}
              </template>
            </el-table-column>
            <el-table-column
              label="利息金额"
              min-width="100"
              align="center">
              <template slot-scope="scope">
                {{scope.row.interest}}
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div class="pagination-container">
          <el-pagination
            background
            @size-change="handleSizeChange4"
            @current-change="handleCurrentChange4"
            layout="total, sizes,prev, pager, next,jumper"
            :current-page.sync="listQuery4.pageNum"
            :page-size="listQuery4.pageSize"
            :page-sizes="[10,15,20]"
            :total="count4">
          </el-pagination>
        </div>
      </div>
    </el-dialog>



  </div>
</template>
<script>
import {getCustomerOption,getOrderUsersList} from '@/api/partner'
import {validateCommission} from '@/utils/validate';
import store from '@/store'
import { mapGetters } from 'vuex'
import {
  capitalCostInterestListNew,
  luXiInterestList,
  luXiOrderList
} from "../../api/partner";
const defaultListQuery={
  "orderSn" : "",  //合同单号
  "customerId" : '',  //客户ID
  "deliverSn" : "",  //发货单号
  "userId" : '',  //业务员ID
  "shipDate" : [], //发货日期
  "computeDate" : [], //利息更新时间
  "pageNum"      :    1,  //第几页
  "pageSize"     :    10, //每页几条
  ccdType:''
};

const defaultListQuery3={
  "orderSn" : "",  //合同单号
  "customerId" : '',  //客户ID
  "deliverSn" : "",  //发货单号
  "userId" : '',  //业务员ID
  "computeDate" : [], //计息日期
  "pageNum"      :    1,  //第几页
  "pageSize"     :    10, //每页几条
};
const defaultListQuery2={

  "pageNum"      :    1,  //第几页
  "pageSize"     :    10, //每页几条
};

export default {
  name: "luxiCapitalCost",
  data(){

    return {
      userOptionList:[],
      roles:store.getters.roles ? store.getters.roles : [],

      listQuery2: JSON.parse(JSON.stringify(defaultListQuery)),
      tableData2: [],
      count2: 0,
      listLoading2: false,
      dialogVisible:false,

      listQuery3: JSON.parse(JSON.stringify(defaultListQuery3)),
      tableData3: [],
      count3: 0,
      listLoading3: false,
      dialogVisible2:false,
      interestAll:0,//利息总额

      listQuery4: JSON.parse(JSON.stringify(defaultListQuery2)),
      tableData4: [],
      count4: 0,
      listLoading4: false,




      activeName:'first',
      btnLoading:false,

      btnLoading3:false,

    }
  },
  computed: {
    ...mapGetters([
      'name',
      'mobile',
      'userId'
    ]),
  },
  created() {
    this.getList2();
    this.getList3();
    this.getUserOptionList();
  },
  watch:{

  },
  filters: {

  },
  methods:{
    //下载excle
    downloadExcel3(){
      let params = JSON.parse(JSON.stringify(this.listQuery3));
      params.isExport = 1;
      delete params.pageSize
      delete params.pageNum
      this.btnLoading3  = true;
      luXiInterestList(params).then((res)=>{
        this.btnLoading3 = false;
        require.ensure([], () => {
          const { export_json_to_excel } = require('sheet/Export2Excel');
          const tHeader = res.title;
          const filterVal = res.columns;
          const list = res.list;
          const data = this.formatJson(filterVal, list);
          export_json_to_excel(tHeader, data, res.fileName);
        })
      }).catch(()=>{
        this.btnLoading3 = false;
      })
    },



    toOrderDetail(orderId){
      let routeData = this.$router.resolve({name:'purchaseDetail',query:{id:orderId,type:'see',seeType:'caiWu'}});
      window.open(routeData.href);
    },

    //下载excle
    downloadExcel(){
      let params = JSON.parse(JSON.stringify(this.listQuery2));
      params.isExport = 1;
      delete params.keywords;
      delete params.pageNum;
      delete params.pageSize;
      this.btnLoading = true;
      luXiOrderList(params).then((res)=>{
        this.btnLoading = false;
        require.ensure([], () => {
          const { export_json_to_excel } = require('sheet/Export2Excel');
          const tHeader = res.title;
          const filterVal = res.columns;
          const list = res.list;
          const data = this.formatJson(filterVal, list);
          export_json_to_excel(tHeader, data, res.fileName);
        })
      }).catch(()=>{
        this.btnLoading = false;
      })


    },

    //下载表格数据格式化
    formatJson(filterVal, jsonData) {
      return jsonData.map(v => filterVal.map(j => v[j]))
    },



    //获取员工下拉选项
    getUserOptionList(){
      getOrderUsersList().then((res)=>{
        this.userOptionList = res;
      })
    },

    //选择员工名称
    handleSelectUserName(key,item){
      this.listQuery[key] = item.userId;
    },

    //客户名称输入匹配
    querySearch(queryString, cb){
      getCustomerOption({keywords:queryString}).then((res)=>{
        cb(res);
      })
    },

    //选择客户名称
    handleSelectCustomerName(item){
      this.listQuery2.keywords = item.customerName;
      this.listQuery2.customerId = item.customerId
    },

    //清除客户选择
    clearKeywords(){
      this.listQuery2.customerId = ''
    },

    //选择客户名称
    handleSelectCustomerName3(item){
      this.listQuery3.keywords = item.customerName;
      this.listQuery3.customerId = item.customerId
    },

    //清除客户选择
    clearKeywords3(){
      this.listQuery3.customerId = ''
    },



    handleSearchList2(){
      this.listQuery2.pageNum = 1;
      this.getList2();
    },


    handleSizeChange2(val){
      this.listQuery2.pageNum = 1;
      this.listQuery2.pageSize = val;
      this.getList2();
    },
    handleCurrentChange2(val){
      this.listQuery2.pageNum = val;
      this.getList2();
    },

    //获取列表
    getList2() {
      this.listLoading2 = true;
      let data = JSON.parse(JSON.stringify(this.listQuery2));
      luXiOrderList(data).then(response => {
        this.tableData2 = response.list;
        this.count2 = response.count;
        this.listLoading2 = false;
      }).catch(()=>{
        this.listLoading2 = false;
      });
    },

    //显示利息记录弹窗
    showDialog2(item){
      this.dialogVisible2 = true;
      this.listQuery4 = JSON.parse(JSON.stringify(defaultListQuery2))
      this.listQuery4.coId = item.coId;
      this.getList4();
    },

    //关闭利息记录弹窗
    handleClose2(){
      this.dialogVisible2 = false;
    },

    handleSizeChange4(val){
      this.listQuery4.pageNum = 1;
      this.listQuery4.pageSize = val;
      this.getList4();
    },
    handleCurrentChange4(val){
      this.listQuery4.pageNum = val;
      this.getList4();
    },

    //获取列表
    getList4() {
      this.listLoading4 = true;
      let data = JSON.parse(JSON.stringify(this.listQuery4));
      luXiInterestList(data).then(response => {
        this.tableData4 = response.list;
        this.count4 = response.count;
        this.listLoading4 = false;
      }).catch(()=>{
        this.listLoading4 = false;
      });
    },



    handleSizeChange3(val){
      this.listQuery3.pageNum = 1;
      this.listQuery3.pageSize = val;
      this.getList3();
    },
    handleCurrentChange3(val){
      this.listQuery3.pageNum = val;
      this.getList3();
    },

    handleSearchList3(){
      this.listQuery3.pageNum = 1;
      this.getList3();
    },

    //获取列表
    getList3() {
      this.listLoading3 = true;
      let data = JSON.parse(JSON.stringify(this.listQuery3));
      delete data.keywords;
      luXiInterestList(data).then(response => {
        this.tableData3 = response.list;
        this.count3 = response.count;
        this.interestAll = response.interestAll
        this.listLoading3 = false;
      }).catch(()=>{
        this.listLoading3 = false;
      });
    },



  },
}
</script>

<style lang="scss">
.cspantd .cell{
  padding:0
}
.total-row{
  margin-bottom:40px;
  text-align: center;
  .total-col{
    border:1px solid #eee;
    padding:30px 0;
    border-radius: 20px;

  }
  .num{
    font-size:24px;
    font-weight: bold;

  }
  .name{
    font-size:14px;
    color:#999;
    margin-top:10px
  }
}
</style>
